<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import { getLogsApi, getLogLevelsApi } from '@/api/role'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { ElTag } from 'element-plus'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import { BaseButton } from '@/components/Button'
// import { asyncRouterMap } from '@/router'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const { t } = useI18n()
const searchParams = ref({})
console.log('-------', route.query)
if (route.query) {
  searchParams.value = route.query
}
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getLogsApi({
      pageNo: unref(currentPage),
      pageRow: unref(pageSize),
      pageModel: { ...unref(searchParams) }
    })
    return {
      list: res.data.pageModels || [],
      total: res.data.totalCount
    }
  }
})
const logLevels = ref([])
const getLogLevels = async () => {
  const res = await getLogLevelsApi()
  const list = res.data || []
  logLevels.value = list.map((item) => {
    return {
      label: item.configName,
      value: item.configName
    }
  })
}
getLogLevels()

const { dataList, loading, total, pageSize, currentPage } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  // {
  //   field: 'logType',
  //   label: t('log.logType')
  // },
  {
    field: 'logLevel',
    label: t('log.logLevel')
  },
  {
    field: 'logContent',
    label: t('log.logContent')
  },

  {
    field: 'createTime',
    label: t('tableDemo.displayTime')
  },
  {
    field: 'remark',
    label: t('userDemo.remark')
  }
  // ,
  // {
  //   field: 'action',
  //   label: t('userDemo.action'),
  //   width: 240,
  //   slots: {
  //     default: (data: any) => {
  //       const row = data.row
  //       return (
  //         <>
  //           <BaseButton type="primary" onClick={() => action(row, 'edit')}>
  //             {t('exampleDemo.edit')}
  //           </BaseButton>
  //           <BaseButton type="success" onClick={() => action(row, 'detail')}>
  //             {t('exampleDemo.detail')}
  //           </BaseButton>
  //           <BaseButton type="danger">{t('exampleDemo.del')}</BaseButton>
  //         </>
  //       )
  //     }
  //   }
  // }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'logLevel',
    label: t('log.logType'),
    component: 'Select',
    componentProps: {
      placeholder: t('log.logType'),
      style: { width: '240px' },
      filterable: true
    },
    optionApi: () => {
      return logLevels.value
    }
  },
  {
    field: 'logContent',
    label: t('log.logContent'),
    component: 'Input'
  },
  {
    field: 'date',
    label: t('problem.time'),
    component: 'DatePicker',
    componentProps: {
      style: { width: '340px' },
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      StartPlaceholder: 'Start date',
      EndPlaceholder: 'End date'
    }
  }
])

const setSearchParams = (params: any) => {
  if (params.date) {
    params.startTime = params.date[0]
    params.endTime = params.date[1]
    delete params.date
  }
  searchParams.value = params

  getList()
}
</script>

<template>
  <ContentWrap>
    <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />

    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :reserveIndex="true"
      :columns="tableColumns"
      default-expand-all
      node-key="guid"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
